<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/animate.css"/>
    <link rel="stylesheet" href="./css/font-awesome.min.css"/>
    <link rel="stylesheet" href="./css/flexslider.css"/>
    <link rel="stylesheet" href="./css/base.css"/>
</head>
<body>

<!-- header 顶部 -->
<header>
    <a href="./"><img src="./images/logo.png" alt=""/>淘划算 - 未来商店</a>
    <span class="right">
        <form>
            <input type="text" class="headInput" placeholder="输入商品名称"/><input type="button" class="headBtn" value="搜索"/>
        </form>
    </span>
</header>


<div class="road">
    <a href="javascript:history.back(-1)"><i class="fa fa-angle-left"></i></a>
    电器 > 冰箱
    <hr/>
</div>

<div class="goodDetail">
    <div class="goodLeft">
        <div class="flexslider flexslider_thumb">
            <ul class="slides">
                <li data-thumb="./images/slide1-thumb.jpg">
                    <img src="./images/slide1.jpg"/>
                </li>
                <li data-thumb="./images/slide2-thumb.jpg">
                    <img src="./images/slide2.jpg"/>
                </li>
                <li data-thumb="./images/slide3-thumb.jpg">
                    <img src="./images/slide3.jpg"/>
                </li>
                <li data-thumb="./images/slide4-thumb.jpg">
                    <img src="./images/slide4.jpg"/>
                </li>
            </ul>
        </div>
    </div>
    <div class="goodRight">
        <div><span class="attr">产品名称：</span>

            <p>IT港风2015夏装新款紫色迷彩印花猿人头短袖t恤女潮牌男女情侣装</p></div>

        <div><span class="attr">产品价格：</span><b class="goodPrice">￥329.00</b></div>

        <div><span class="attr">产品版本：</span>BCD-610KWM</div>

        <div><span class="attr">产品颜色：</span>
            <a href="javascript:;" class="chosenItem active">蓝色</a>
            <a href="javascript:;" class="chosenItem">白色</a>
        </div>

        <div><span class="attr">产品尺寸：</span>
            <a href="javascript:;" class="chosenItem active">S</a>
            <a href="javascript:;" class="chosenItem">M</a>
            <a href="javascript:;" class="chosenItem">L</a>
            <a href="javascript:;" class="chosenItem">XL</a>
            <a href="javascript:;" class="chosenItem">XXL</a>
        </div>

        <div><span class="attr">购买数量：</span>

            <p class="shopNumber">
                <a href="javascript:;" class="btn-minus">-</a>
                <span class="number">1</span>
                <a href="javascript:;" class="btn-add">+</a>
            </p>
        </div>

        <div class="btnWrap"><a href="#" class="btnBuy">立即购买</a><a href="#" class="btnCart">加入购物车</a></div>

    </div>
</div>

<div class="tab-container">
    <ul class="nav-tabs">
        <li class="active">商品详情</li>
        <li>评价详情</li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane active">
            <div class="row">
                <div class="col-sm-4">品牌：Homa/奥马</div>
                <div class="col-sm-4">型号：bc-92</div>
                <div class="col-sm-4">箱门结构：单门</div>
                <div class="col-sm-4">开门方式：左开门</div>
                <div class="col-sm-4">制冷方式：直冷</div>
                <div class="col-sm-4">最大容积：92L</div>
            </div>
            <div class="detail">
                <img src="./images/pic2.jpg" alt=""/>
                <p>日前，福建谈先生收到了一条查看孩子在校成绩资料的短信，点击短信中的网址进入后又提示下载。谁知，就因为两个点击，银行卡里的3419元被莫名转走。记者了解到，近期因为点击了带链接的短信而中招的人不在少数，近一个月以来，360手机卫士拦截此类短信约20万条。360手机安全专家提醒，三类带链接的短信千万别点，小心是木马。</p>
            </div>


        </div>
        <div class="tab-pane">
            评价内容！
        </div>
    </div>
</div>

<div class="backTop">
    <a href="javascript:;" class="btnBack"><i class="fa fa-chevron-up"></i></a>
    <a href="#"><i class="fa fa-shopping-cart"></i></a>
</div>

<script src="./js/jquery.min.js"></script>
<script src="./js/jquery.flexslider-min.js"></script>
<script>

    $(function () {
        $(".flexslider_thumb").flexslider({
            animation: "slide",
            controlNav: "thumbnails",
            slideshowSpeed: 4000, //展示时间间隔ms
            animationSpeed: 400, //滚动时间ms
            touch: true //是否支持触屏滑动
        });

        $(".nav-tabs li").click(function(){
            var index = $(this).index();
            $(this).siblings().removeClass("active").end().addClass("active");
            $(this).parent(".nav-tabs").siblings(".tab-content").find(".tab-pane").removeClass("active");
            $(this).parent(".nav-tabs").siblings(".tab-content").find(".tab-pane:eq("+index+")").addClass("active");

        })

        $(".chosenItem").click(function(){
            $(this).siblings().removeClass("active").end().addClass("active");
        })

        //点加号
        $(".btn-add").click(function () {
            var n = parseInt($(this).parent().find(".number").text());
            $(this).parent().find(".number").text(n + 1);
        });

        //点减号
        $(".btn-minus").click(function () {
            var n = parseInt($(this).parent().find(".number").text());
            if (n > 1) {
                $(this).parent().find(".number").text(n - 1);
            }
        })

        //回到顶部
        $(".btnBack").click(function(){
            $('html,body').animate({scrollTop:0},500);
        });


    });
</script>
</body>
</html>